<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <div class="input"><input type="text" @keyup.enter="onEnter" v-model="keyword"></div>
    
        <div>正在进行{{lists.length-readyItem}}</div>
        <div v-for="item of lists">
          <div v-if="item.state==false">
              <input type="checkbox" v-model="item.state">
              {{item.name}}</div>
        </div>
    
        <div>已完成{{readyItem}}</div>
        <div v-for="item of lists">
          <div v-if="item.state==true"><input type="checkbox" v-model="item.state">{{item.name}}</div>
        </div>
    
        <div>
          <input type="checkbox" v-model="sum">全选/反选
        </div>
      </div>
    
      <script>
        new Vue({
          el:"#app",
          data:{
            keyword:"",
        arr:[
            {name:"css",state:false},
            {name:"html",state:false},
            {name:"vue",state:false}
        ]
          },
          computed:{
            sum:{
              get(){
                return this.lists.every(item=>item.state);
              },
              set(value){
                this.lists.forEach(item=>{
                  item.state = value;
                })
              }
            },
            readyItem(){
              var res = this.lists.filter(item=>item.state==true);
              return res.length;
            }
          },
          methods:{
            onEnter(){
              var keyword = this.keyword;
              var res = this.lists.every(item=>item.name!=keyword.trim());
              if(res && keyword.trim()){
                this.lists.unshift({
                  name:keyword,
                  state:false
                })
              }
            }
          },
        })
      </script>
</body>
</html>